<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>凭证打印</title>
		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

		<!--    引入Layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>

		<style type="text/css">
			.layui-table-click {
				background-color: cadetblue !important;
				color: white;
			}

			::-webkit-scrollbar {
				width: 6px;
				height: 10px;
				background-color: rgba(255, 255, 255, 0.1);
			}

			::-webkit-scrollbar-thumb {
				background: rgba(144, 147, 153, .3);
				border-radius: 4px;
				cursor: pointer;
			}

			.layui-form-label {
				float: left;
				display: block;
				padding: 7px 1px;
				width: 100px;
				font-weight: 400;
				line-height: 14px;
				text-align: right;
			}

			/**输入框高度设置**/
			.layui-input,
			.layui-select,
			.layui-textarea {
				height: 30px;
				line-height: 30px\9;
			}

			/**按钮样式设置**/
			.layui-btn {
				height: 30px;
				line-height: 30px;
				font-size: 13px;
			}

			.layui-btn+.layui-btn {
				margin-left: 0px;
			}

			.layui-table,
			.layui-table-view {
				margin: 0px 0;
			}

			
			.tableboxs{
				margin: 0 auto;
				width: 80%;
				position: relative;
			}
			
			.tablebox {
				margin: 0 auto;
				width: 80%;
				text-align: center;
			}

			.tablebox .titletop {
				margin-bottom: 10px;
				margin-top: 10px;
				font-size: 20px;
				font-weight: 700;
			}

			.tablebox .spans {
				width: 100%;
				text-align: right;
				margin-bottom: 5px;
			}

			.tablebox .spans div {
				display: flex;
				justify-content: space-between;
			}

			.tablebox td,
			.tablebox th {
				height: 30px;
				padding: 5px 10px;
			}

			.posbottom {
				width: 80%;
				margin: 10px auto;
			}

			.posbottom div {
				display: flex;
				justify-content: space-between;
			}
			.displayleft{
				display: flex;
				padding: 10px;
				background-color: #f1f1f1;
				margin-top: 20px;
			}
			.itembtn{
				width: 64px;
				text-align: center;
				border-left: 1px solid #ddd;
			}
			.itembtn:hover{
				cursor: pointer;
			}

			
		</style>
	</head>
	<body >
	<div id="app" >
		<div class="displayleft">
			<div class="itembtn" @click="htmlprint"><i class="layui-icon layui-icon-print"></i> 打印</div>
			<!--			<div class="itembtn"><i class="layui-icon layui-icon-export"></i> 导出</div>-->
		</div>

		<div  id="printMy" style="color: #000000;padding: 5px;">
			<div class="demoTable"    >
				<table id="tablebox_table">
					<div class="tableboxs">
						<!-- 专用收据表格 -->
						<table border='1' class='tablebox'>
							<caption class="titletop">收费凭证</caption>
							<caption class="spans">
								<div>
									<span>业主名称：{{formData.xm}}</span>
									<span>缴费时间：{{formData.sj}}</span>
								</div>
							</caption>
							<tr>
								<td width="100px">缴费类型：</td>
								<td>购水</td>
								<td width="100px">充值类型：</td>
								<td>{{formData.zffs}}</td>
							</tr>
							<tr>
								<td>充值金额：</td>
								<td>{{formData.fee}}元</td>
								<td>充值数量：</td>
								<td>{{formData.gsl}}立方</td>
							</tr>
							<tr>
								<td>水单价：</td>
								<td>{{jbsdj}}元</td>
								<td>调剂数量：</td>
								<td>0立方</td>
							</tr>
							<tr>
								<td>地址：</td>
								<td>{{formData.khdz}}</td>

								<td colspan="2">电话：{{formData.dh}}  卡号：{{formData.kbh}}</td>
							</tr>

							<tr>
								<td>备注：</td>
								<td colspan="3">基本水费 {{formData.jbsf_fee}}  水资源费 {{formData.szyf}}  污水费 {{formData.wsj}}</td>
							</tr>


						</table>

					</div>

					<div class="posbottom">
						<div>
							<span>收款人：阿克陶水投公司</span>
							<span>操作员：{{formData.czy}}</span>
						</div>
					</div>
				</table>
			</div>
		</div>

	</div>


		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					parmsData:{},
					formData:{szyf:0,wsj:0,jbsf_fee:0},
					jbsdj:"2.01",
				},
				created(){
					this.parmsData = getParams();
					this.getDataPrint();
				},
				methods: {
					htmlprint(){
						$("#printMy").print();
					},
					async getDataPrint(){
						let tableId = getTableId("903");
						let userstr = localStorage.getItem("user");
						if(userstr == undefined){
							tableId = "shuiwu-903";
						}
						const res = await page(tableId,"id","1","10",{id:this.parmsData.id});
						this.formData = res.data.rows[0];
						const res1 = await listAdmin(getTableId("892"),"id",{id:""+this.formData.jgid});
						this.jbsdj = Number(res1.data[0].jbsj)+Number(res1.data[0].szyf)+Number(res1.data[0].wsj);
						this.jbsdj = Number(this.jbsdj).toFixed(2);
						this.formData.jbsf_fee = Number(this.formData.jbsf)*Number(this.formData.gsl);
						this.formData.jbsf_fee = Number(this.formData.jbsf_fee).toFixed(2);
					}
				},

			})
		</script>
	</body>
</html>
